import React from 'react';
import './StorySelector.css';

interface Story {
  id: string;
  title: string;
  description: string;
  audioUrl: string;
  lrcFile: string | null;
}

interface StorySelectorProps {
  stories: Story[];
  currentStory: Story | null;
  isOpen: boolean;
  onClose: () => void;
  onSelect: (story: Story) => void;
}

const StorySelector: React.FC<StorySelectorProps> = ({
  stories,
  currentStory,
  isOpen,
  onClose,
  onSelect
}) => {
  if (!isOpen) return null;

  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  const handleStorySelect = (story: Story) => {
    onSelect(story);
    onClose();
  };

  // 从LRC文件路径中提取文件名
  const getLrcFileName = (lrcFile: string | null): string => {
    if (!lrcFile) return '未知故事';
    const fileName = lrcFile.split('/').pop() || lrcFile;
    return fileName.replace('.lrc', '');
  };

  return (
    <div className="story-selector-overlay" onClick={handleBackdropClick}>
      <div className="story-selector-modal">
        <div className="story-selector-header">
          <h2>选择故事</h2>
          <button className="close-button" onClick={onClose}>
            ×
          </button>
        </div>
        <div className="story-selector-content">
          {stories.map((story) => (
            <button
              key={story.id}
              className={`story-item ${currentStory?.id === story.id ? 'active' : ''}`}
              onClick={() => handleStorySelect(story)}
            >
              <div className="story-info">
                <div className="story-title">{getLrcFileName(story.lrcFile)}</div>
                <div className="story-description">{story.description}</div>
              </div>
              {currentStory?.id === story.id && (
                <div className="current-indicator">正在播放</div>
              )}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default StorySelector;